<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的答题</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/answer/test' }">考试</el-breadcrumb-item>
      <el-breadcrumb-item>{{testname}}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="top">
      <el-radio v-model="type" label="1">严格模式</el-radio>
      <el-radio v-model="type" label="2">宽松模式</el-radio>
    </div>

    <el-row>
      <el-col :span="16" :offset="4">
        <div>
          <el-alert title="题目" type="success" center class="ques" :closable="false"></el-alert>

          <!-- +1 -->
          <!-- questions从后端获取的题目集，itemnum当前的题目号,question有两个属性，一个为content，一个是id -->
          <!-- {{questions[itemnum].details}} -->
          <div class="areaq">{{questions}}</div>

          <el-alert title="用户回答" type="error" effect="dark" center :closable="false" class="ans"></el-alert>

          <!-- 改v-model +1 -->
          <el-input
            type="textarea"
            :autosize="{ minRows: 7, maxRows: 7}"
            placeholder="答题区域"
            class="in"
            v-model="answer"
          ></el-input>

          <div class="btn">
            <el-button type="primary" @click="up" size="mini">上一题</el-button>
            <el-button type="danger" @click="submit" size="medium" class="btn2">确认提交</el-button>
            <el-button type="primary" @click="down" size="mini">下一题</el-button>
          </div>

          <!-- <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <el-button type="primary" @click="up" icon="el-icon-arrow-left" size="mini">上一题</el-button>
            </el-col>
            <el-col :span="5" :push="1">
              <el-button type="danger" @click="submit" size="mini">提交回答</el-button>
            </el-col>
            <el-col :span="5" :push="2">
              <el-button type="primary" @click="down" size="mini">
                下一题
                <i class="el-icon-arrow-right el-icon--right"></i>
              </el-button>
            </el-col>
          </el-row>-->
        </div>
        <el-button class="subh" type="success" @click="subhwork()">提交作业</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    // +1
    return {
      // +1
      questions: '',
      itemnum: 1,
      answer: '',

      testname: '',

      uid: this.$store.state.userId,
      questionsList: [],

      type: '2'
    }
  },
  created() {
    this.getQuestion()
  },
  methods: {
    // 待完善
    async getQuestion() {
      const { data: res } = await this.$http.get(
        'exam/getExamQuestionList/' + this.$route.params.id
      )
      if (res.code !== 200) return this.$message.error(res.message)

      this.testname = Object.keys(res.data)[0]
      this.questionsList = res.data[this.testname]
      this.questions = this.questionsList[this.itemnum].details
      console.log(res)
    },

    // +1
    async submit() {
      if (this.answer == null) {
        return this.$message.info('您还没有填入答案')
      } else {
        const { data: res } = await this.$http.post(
          `user/answer/submit?reply=${this.answer}&questionId=${
            this.questionsList[this.itemnum].id
          }&userId=${this.uid}`
        )
        if (res.code !== 200) return this.$message.error(res.message)
        this.$message.success('提交成功')
        console.log(res)
      }
    },

    // 提交考试
    async subhwork() {
      const { data: res } = await this.$http.post(
        `user/grade/addGrade?userId=${this.uid}&examId=${this.$route.params.id}`
      )
      if (res.code !== 200) return this.$message.error(res.message)
      this.$message.success(res.message)
    },

    clear() {
      this.answer = ''
      this.score = null
      this.standard_ans = ''
    },

    up() {
      if (this.itemnum !== 0) {
        this.itemnum--
        this.questions = this.questionsList[this.itemnum].details
        this.clear()
      }
    },

    down() {
      if (this.itemnum < this.questionsList.length) {
        this.itemnum++
        this.questions = this.questionsList[this.itemnum].details
        this.clear()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  margin-bottom: 15px;
  margin-right: 40px;
  display: flex;
  flex-direction: row-reverse;
  .el-radio {
    margin-left: 40px;
  }
}

.subh {
  margin-top: 50px;
  margin-left: 540px;
}

// 在更改elementui的样式时，scoped会出现问题
.el-row {
  margin-top: 60px;
}

.btn {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .el-button {
    background-color: #f55d54;
    border: none;
  }
  .btn2 {
    background-color: #e64340;
  }
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.ques {
  background: #2946e0 !important;
  color: #fff !important;
  // text-align: center;
}

/deep/ .el-alert__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 18px;
}

.areas {
  height: 50px;
  font-size: 14px;
  color: black;
}

.areaq {
  background: #e8ebfe;
  height: 120px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-left: 20px;
}

.ans {
  margin-top: 60px;
}

.in {
  /deep/ .el-textarea__inner {
    background-color: #fddbd9;
  }
}
</style>